<template>
  <div>
    <head-top :headTitle="headTitle" :showBack="true"></head-top>
    <div class="c_content">
      <div
        style="position: fixed;
    z-index: 566;
    background: #fff;
    width: 100%;
    top: 2.5rem;"
      >
        <div class="c_patient">
          <!--           <nuxt-link :to="{name:'chooseyaodian',query:{name:this.$route.query.name,info:this.$route.query.info,id:this.$route.query.id}}" tag="button"
            class="c_patient_b"
          >开药方
          </nuxt-link>-->
          <button @click="showpopright1" class="c_patient_b">开处方</button>
          <p class="c_patient_p">姓名：{{this.patientInfo.PATNAME}}  性别：{{this.patientInfo.PATSEX}}  年龄：{{this.patientInfo.PATNL}}</p>
        </div>

        <!-- @click="changeShowType='bingli'" -->
        <section class="c_nav" style="height:1rem">
          <div @click="getListData('bingli')">
            <span
              :class="{c_nav_active: changeShowType =='bingli'}"
            >处方</span>
          </div>
          <div @click="getListData('liuyan')">
            <span
              :class="{c_nav_active: changeShowType =='liuyan'}"
            >留言</span>
          </div>
        </section>


      </div>

      <div name="fade-choose">
        <section
          class="bingli"
          v-infinite-scroll="loadMore"
          infinite-scroll-disabled="busy"
          infinite-scroll-distance="10"
        >

          <div
            class="bingli_con"
            v-show="changeShowType =='bingli'"
            v-for="(item,index) in list1"
            :key="item.id"
            @click="showpopright(item)"
          >
            <!--  @click="goOpenPrescribe(item)" -->
            <p>
              处方号：{{item.ORDERCODE}}
              <!-- <span :class="item.PRESCRIBETYPE=='2'?'xyflag':'zyflag'"> -->
              <span>
                <span
                  :class="{xyflag:item.PRESCRIBETYPE==2,zyflag:item.PRESCRIBETYPE==1}"
                >{{item.PRESCRIBETYPE=='2'?'西药':'中药'}}</span>
              </span>
            </p>
            <p>
              开药时间：{{item.ORDERTIME}}
              <span></span>
            </p>
          </div>
          <backTop></backTop>


          <!--         <scroller v-show="changeShowType =='liuyan'" class="liuyan" :onRefresh="refresh" :onInfinite="infinite">
          <div
            class="liuyan"
            v-for="item in list"
            :key="item.id"
          >
            <p :class="{doctor:item.WHOSE==2,patient:item.WHOSE==1}">
              <span class="liuyan_time">{{item.LEAVETIME}}</span>
              {{item.NAME}}：{{item.LEAVEMESSAGE}}
            </p>
          </div>
        </scroller> -->

          <div
            id="liuyanContent"
            class="liuyan"
            v-show="changeShowType =='liuyan'"
            v-for="item in list"
            :key="item.id"
          >
            <p :class="{doctor:item.WHOSE==2,patient:item.WHOSE==1}">
              <span class="liuyan_time">{{item.LEAVETIME}}</span>
              {{item.NAME}}：{{item.LEAVEMESSAGE}}
            </p>
          </div>

          <section
            class="huifu"
            v-show="changeShowType =='liuyan'"
          >
            <input type="text" placeholder="请输入回复内容" class="inputMessage" v-model="inputValue">
            <button type="submit" class="buttonMessage" @click="submitLiuyan">回复</button>
          </section>

          <p class="loadingT">{{loadingText}}</p>
        </section>
      </div>
      <!-- 开处方选项 -->
      <mt-popup v-model="popupVisibleright1" position="bottom">
        <mt-cell title="中药处方" @click.native="openPre('zy')">
          <span>
            <svg fill="#000" class="icon" style viewBox="0 0 1024 1024"
              width="24" height="24"
            >
              <defs>
                <style type="text/css"></style>
              </defs>
              <path
                d="M801.388946 923.742599 216.137619 923.742599c0 0 55.856146-49.429783 151.255912-56.844659 0 0-285.706067-78.099752-301.029054-418.178171l889.741203 0c0 0-38.555108 317.340555-305.477366 420.155199C744.544287 864.426655 801.388946 923.742599 801.388946 923.742599zM270.015713 115.066689c55.361889 81.559551 163.613358 273.842879 163.613358 273.842879L263.096117 388.909567c0 0-90.457198-168.55695-110.22952-202.663746C120.736828 131.37819 228.989321 55.256488 270.015713 115.066689zM512.717338 524.347213c0 0-149.278885 80.07678-108.745726 182.397167 22.243607 57.338916 57.833173 50.912553 57.833173 50.912553L506.786255 647.428436l0 208.100572c0 0 54.867632-55.856146 108.745726-148.784628S512.717338 524.347213 512.717338 524.347213z"
              ></path>
            </svg>
          </span>
        </mt-cell>
        <mt-cell title="西药处方" @click.native="openPre('xy')">
          <span>
            <svg fill="#000" class="icon" style viewBox="0 0 1024 1024"
              width="24" height="24"
            >
              <defs>
                <style type="text/css"></style>
              </defs>
              <path d="M6.4 505.6h288V576H6.4V505.6z" fill></path>
              <path
                d="M262.4 576H38.4c-12.8 0-25.6-6.4-32-19.2-6.4-12.8-6.4-25.6 0-38.4 6.4-6.4 19.2-19.2 32-19.2H256c12.8 0 25.6 6.4 32 19.2 6.4 12.8 6.4 25.6 0 38.4 0 12.8-12.8 19.2-25.6 19.2zM38.4 505.6c-12.8 0-19.2 6.4-25.6 12.8-6.4 12.8-6.4 25.6 0 38.4 6.4 12.8 12.8 19.2 25.6 19.2H256c12.8 0 25.6-6.4 32-19.2 6.4-12.8 6.4-25.6 0-38.4-6.4-6.4-12.8-12.8-25.6-12.8H38.4z"
                fill
              ></path>
              <path d="M185.6 396.8v288H115.2V396.8h70.4z" fill></path>
              <path
                d="M153.6 684.8c-19.2 0-38.4-19.2-38.4-38.4V428.8c0-12.8 6.4-25.6 19.2-32 12.8-6.4 25.6-6.4 38.4 0 12.8 6.4 19.2 19.2 19.2 32v217.6c-6.4 19.2-19.2 38.4-38.4 38.4z m0-288c-25.6 0-38.4 12.8-38.4 32v217.6c0 12.8 6.4 25.6 19.2 32 12.8 6.4 25.6 6.4 38.4 0 12.8-6.4 19.2-19.2 19.2-32V428.8c-6.4-19.2-19.2-32-38.4-32z"
                fill
              ></path>
              <path
                d="M32 729.6c-6.4 0-12.8 0-19.2-6.4-6.4-6.4-6.4-12.8-6.4-19.2V352c0-6.4 6.4-19.2 12.8-19.2L134.4 256V192c0-12.8 12.8-25.6 25.6-25.6s25.6 12.8 25.6 25.6v76.8c0 6.4-6.4 19.2-12.8 19.2L57.6 364.8V704c0 12.8-12.8 25.6-25.6 25.6z m646.4-390.4c-6.4 0-6.4 0-12.8-6.4l-57.6-38.4c-6.4 0-12.8-12.8-12.8-19.2V198.4c0-12.8 12.8-25.6 25.6-25.6s25.6 12.8 25.6 25.6v64l44.8 32c12.8 0 12.8 12.8 12.8 25.6-6.4 6.4-12.8 19.2-25.6 19.2z"
                fill
              ></path>
              <path
                d="M678.4 217.6H544c-6.4 0-19.2-6.4-19.2-12.8-6.4-6.4-6.4-12.8 0-25.6 6.4-6.4 12.8-12.8 19.2-12.8h108.8V89.6H121.6v76.8h294.4c12.8 0 25.6 12.8 25.6 25.6s-12.8 25.6-25.6 25.6h-320c-19.2 0-25.6-6.4-25.6-25.6V64c0-12.8 12.8-25.6 25.6-25.6h588.8c6.4 0 12.8 0 19.2 6.4V192c0 6.4 0 12.8-6.4 19.2-6.4 6.4-12.8 6.4-19.2 6.4zM896 390.4c-6.4 0-6.4 0-6.4-6.4-6.4-6.4-12.8-12.8-25.6-19.2-6.4-6.4-6.4-12.8-6.4-19.2 6.4-6.4 12.8-6.4 19.2-6.4 12.8 6.4 19.2 12.8 32 19.2 6.4 6.4 6.4 6.4 0 12.8 0 19.2-6.4 19.2-12.8 19.2z m-192 32c-6.4 0-12.8 0-12.8-6.4v-12.8l32-32c19.2-19.2 44.8-32 76.8-38.4 6.4 0 6.4 0 12.8 6.4 0 6.4 6.4 6.4 0 12.8 0 6.4-6.4 6.4-12.8 6.4-25.6 0-44.8 12.8-57.6 32l-32 32H704zM768 755.2c-6.4 0-12.8 0-19.2-6.4L512 512c-12.8-12.8-12.8-25.6 0-38.4 12.8-12.8 25.6-12.8 38.4 0l236.8 236.8c6.4 6.4 6.4 19.2 6.4 25.6-6.4 12.8-19.2 19.2-25.6 19.2z"
                fill
              ></path>
              <path
                d="M844.8 614.4L627.2 832h70.4l179.2-179.2c12.8-12.8 12.8-25.6 0-38.4-6.4-12.8-25.6-12.8-32 0z"
                fill
              ></path>
              <path
                d="M960 281.6c-76.8-76.8-211.2-76.8-288 0L320 633.6c-76.8 76.8-76.8 211.2 0 288 70.4 70.4 179.2 76.8 262.4 25.6-12.8-12.8-19.2-32-19.2-44.8-64 51.2-153.6 44.8-211.2-19.2-51.2-57.6-51.2-153.6 6.4-211.2L710.4 320c57.6-64 153.6-64 211.2 0 57.6 57.6 57.6 160 0 217.6-6.4 6.4-6.4 12.8-6.4 25.6s12.8 12.8 19.2 12.8c6.4 0 19.2 0 25.6-6.4 76.8-76.8 76.8-211.2 0-288z"
                fill
              ></path>
              <path
                d="M729.6 832h38.4v-38.4c0-12.8-12.8-25.6-25.6-25.6s-25.6 12.8-25.6 25.6v38.4h12.8l-6.4 134.4H627.2c-25.6 0-44.8-12.8-57.6-32H102.4c-25.6 0-44.8-19.2-44.8-44.8v-38.4c0-12.8-12.8-25.6-25.6-25.6s-25.6 6.4-25.6 19.2v38.4c0 51.2 44.8 96 96 96h569.6c19.2 0 38.4-6.4 57.6-19.2v-128z"
                fill
              ></path>
              <path
                d="M832 985.6H627.2c-32 0-57.6-19.2-76.8-44.8-12.8-25.6-12.8-57.6 0-89.6 12.8-25.6 44.8-44.8 76.8-44.8H832c44.8 0 83.2 38.4 83.2 89.6 6.4 51.2-32 89.6-83.2 89.6z m-204.8-147.2c-19.2 0-44.8 12.8-51.2 32-12.8 19.2-12.8 44.8 0 64 6.4 12.8 25.6 25.6 51.2 25.6H832c32 0 64-25.6 64-64 0-32-25.6-64-64-64H627.2v6.4z"
                fill
              ></path>
              <path
                d="M729.6 985.6c-6.4 0-6.4 0-6.4-6.4s-6.4-6.4-6.4-6.4V832c0-6.4 6.4-12.8 12.8-12.8s12.8 6.4 12.8 12.8v140.8c0 6.4 0 6.4-6.4 6.4 0 6.4 0 6.4-6.4 6.4z"
                fill
              ></path>
            </svg>
          </span>
        </mt-cell>
      </mt-popup>

      <!-- 查看处方详情，查看后可以继续开处方-->
      <mt-popup v-model="popupVisibleright" position="right">
        <!-- <h5>处方详情开发中...</h5> -->
        <!-- <prescribeDetails @closePreDetails="closePreDetails" :prescribeInfo="prescribeInfo"></prescribeDetails> -->
        <prescribeDetailsStatic :prescribeInfo.sync="prescribeInfo" @closePreDetails="closePreDetails" @goOpenPrescribe="goOpenPrescribe"></prescribeDetailsStatic>


      </mt-popup>
      <mt-popup v-model="popupVisibleright_xy" position="right">
        <!-- <h5>处方详情开发中...</h5> -->
        <!-- <prescribeDetails @closePreDetails="closePreDetails" :prescribeInfo="prescribeInfo"></prescribeDetails> -->
        <prescribeDetailsStatic1 :prescribeInfo.sync="prescribeInfoxy" @closePreDetails="closePreDetailsxy" @goOpenPrescribe="goOpenPrescribexy"></prescribeDetailsStatic1>


      </mt-popup>
    </div>

    <div name="tipMove">
      <alert-tip :alertText="alertText" v-if="showAlert" @closeTip="closeTip"></alert-tip>
    </div>
  </div>
</template>
<script>
import alertTip from '~/components/pagetwo/alertTip';
import headTop from '~/components/pagetwo/headTop';
import backTop from '~/components/pagetwo/backTop.vue';
import prescribeDetailsStatic from '~/components/pagetwo/prescribeDetailsStatic.vue';
import prescribeDetailsStatic1 from '~/components/pagetwo/prescribeDetailsStatic1.vue';

const { config } = window;

export default {
  components: {
    alertTip,
    backTop,
    headTop,
    prescribeDetailsStatic,
    prescribeDetailsStatic1,
  },
  data() {
    return {
      prescribeInfo: {},
      prescribeInfoxy: {},
      popupVisibleright: false, // 查看处方
      popupVisibleright_xy: false, // 西药处方
      popupVisibleright1: false, // 开处方选项
      headTitle: '患者详情',
      changeShowType: '',
      list: [],
      role: '',
      inputValue: '',
      alertText: '',
      showAlert: false,
      ts: this.newStore(),
      list1: [],
      busy: true,
      page: 1,
      busy_ly: true,
      page_ly: 1,
      loadingText: '',
      isFold: [],
      slots: [
        {
          flex: 1,
          values: ['中草药方', '西药处方'],
          className: 'slot1',
          textAlign: 'right',
        },
      ],
      prescribeId: '',
      dragList1: [],
      patientInfo: {},
    };
  },

  created() {
    console.log('================1');
    document.title = '问诊';
    console.log('================2');

    this.$root.showfooter = false;
    console.log('================3');
    this.patientInfo = JSON.parse(this.$route.query.patientInfo);
    console.log('================4');
    this.userinfo = JSON.parse(localStorage.getItem(`userInfo.${config.LT}`));
    console.log('================5');
  },
  destroyed() {},
  mounted() {
    console.log('================6');
    this.changeShowType = 'bingli';
    console.log('================7');
    this.getListData('bingli');
    console.log('================8');
  },
  updated() {
    /*     this.$nextTick(() => {
      const liuyan = this.$el.querySelector('.liuyan');
      liuyan.scrollTop = liuyan.scrollHeight;
    }); */
  },
  methods: {
    refresh(done) {
      this.page_ly = 0;
      this.getDayActivities(1, done);
    },
    infinite(done) {
      setTimeout(() => {
        this.page_ly += 1;
        this.getDayActivities(this.page_ly, done);
      }, 500);
    },
    getListData(flag) {
      this.page = 1;
      this.list = [];
      this.list1 = [];

      this.changeShowType = flag;
      this.loadMore();

      console.log(`=============================== 1:${this.page}`);
      console.log(`=============================== changeShowType 1:${this.changeShowType}`);
    },
    openPre(flag) {
      // this.$root.showfooter = false;
      // flag 'zy', 'xy'
      this.$router.push({
        name: 'chooseyaodian',
        query: {
          patientInfo: JSON.stringify(this.patientInfo),
          preType: flag, // 处方类型
        },
      });
    },
    onValuesChange(picker, values) {
      if (values[0] > values[1]) {
        picker.setSlotValue(1, values[0]);
      }
    },

    showpopright1() {
      this.popupVisibleright1 = true;
    },
    showpopright(item) {
      this.prescribeInfo = item;
      this.popupVisibleright = true;

      /*       if (item.PRESCRIBETYPE == '1') {
        this.prescribeInfo = item;
        this.popupVisibleright = true;
      } else {
        this.prescribeInfoxy = item;
        this.popupVisibleright_xy = true;
      } */
    },
    Fold(index) {
      this.isFold.splice(index, 1, !this.isFold[index]);
    },
    loadMore() {
      this.busy = true;
      console.log(`=============================== 666:${this.page}`);
      setTimeout(() => {
        if (this.changeShowType == 'liuyan') {
          this.getDayActivities(true);
        } else {
          this.getbingliList(true);
        }
        this.page += 1;
      }, 500);
    },
    closePreDetails() {
      this.popupVisibleright = false;
    },
    closePreDetailsxy() {
      this.popupVisibleright_xy = false;
    },
    closeTip() {
      this.showAlert = false;
    },
    submitLiuyan() {
      if (this.inputValue.replace(/(^\s*)|(\s*$)/g, '') == '') {
        this.showAlert = true;
        this.alertText = '请输入内容！';
        return false;
      }

      console.log(`PATIENTID :${this.patientInfo.PATIENTID}`);
      if (this.patientInfo.PATIENTID == 'undefined' || this.patientInfo.PATIENTID == undefined || this.patientInfo.PATIENTID == '') {
        this.showAlert = true;
        this.alertText = '就诊人信息有误暂不能留言！';
        return false;
      }

      const date = new Date();
      const y = date.getFullYear();
      let m = date.getMonth() + 1;

      const res = JSON.stringify({
        OTRequest: {
          VERSION: '1.0',
          TN: 'F27.APP.01.18',
          CLIENTID: 'YLAPP',
          RYBID: 'DOCTOR',
          TOKEN: `${sessionStorage.getItem('rybToken')}`,
          DATA: {
            leaveMessage: this.inputValue,
            flag: '2',

            patientId: this.patientInfo.PATIENTID,
            NAME: this.userinfo.docname,
          },
        },
      });

      const hour = date.getHours() < 10 ? `0${date.getHours()}` : date.getHours();
      const minute = date.getMinutes() < 10 ? `0${date.getMinutes()}` : date.getMinutes();
      const second = date.getSeconds() < 10 ? `0${date.getSeconds()}` : date.getSeconds();

      m = m < 10 ? `0${m}` : m;
      let d = date.getDate();
      d = d < 10 ? `0${d}` : d;
      const Newdate = `${`${y}-${m}-${d}`} ${hour}:${minute}:${second}`;

      this.spost(this.ts, '/doctor/AppMainServlet.ap', {
        '': res,
      }).then(() => {
        /* 新增一条留言后，要重新获取数据
          this.list.push({
          LEAVETIME: Newdate,
          WHOSE: '2',
          NAME: this.userinfo.docname,
          LEAVEMESSAGE: this.inputValue,
        }); */

        this.getListData('liuyan');
        this.inputValue = '';
        // document.getElementsByTagName('fade-choose').scrollTo(0, 0);// 兼容苹果手机输入键盘问题，恢复当前元素的位置
      });
      return true;
    },
    getDayActivities(flag) {
      // this.curDay = day;
      const req = JSON.stringify({
        OTRequest: {
          VERSION: '1.0',
          TN: 'F27.APP.01.17',
          CLIENTID: 'YLAPP',
          RYBID: 'DOCTOR',
          TOKEN: `${sessionStorage.getItem('rybToken')}`,
          DATA: {
            rowsperpage: '10',
            page: `${this.page}`,
            patientId: this.patientInfo.PATIENTID,
            ordercolumn: 'leavetime',
            ordertype: 'asc',
          },
        },
      });

      console.log(`=============================== 2:${this.page}`);

      this.spost(this.ts, '/doctor/AppMainServlet.ap', {
        '': req,
      }).then((ts) => {
        if (flag) {
          this.list = this.list.concat(ts.d.DATAOBJ.DATA); // 倒序显示，反转后，后面的加上后面

          console.log(`返回的长度：${ts.d.DATAOBJ.DATA.length}`);

          if (ts.d.DATAOBJ.DATA.length == 0) {
            this.busy = true;
            this.loadingText = '没有更多数据';
            this.scrollDisabled = true; // 将无限滚动关闭
          } else {
            this.scrollDisabled = false; // 当还有多余的数据时，将无限滚动给打开 ，就是可以继续滚动去请求后台
            this.busy = false;
            this.loadingText = '加载中...';
          }
        } else {
          this.list = ts.d.DATAOBJ.DATA;
          this.busy = false;
        }

        // this.list.reverse();
      });
    },
    getbingliList(flag) {
      const req = JSON.stringify({
        OTRequest: {
          VERSION: '1.0',
          TN: 'F27.APP.01.20',
          CLIENTID: 'YLAPP',
          RYBID: 'DOCTOR',
          TOKEN: `${sessionStorage.getItem('rybToken')}`,
          DATA: {
            rowsperpage: '10',
            page: `${this.page}`,
            patientId: this.patientInfo.PATIENTID,
            ordercolumn: 'opendate',
            ordertype: 'desc',
          },
        },
      });

      console.log(`=============================== 3:${this.page}`);

      this.spost(this.ts, '/doctor/AppMainServlet.ap', {
        '': req,
      }).then((ts) => {
        // this.list1 = ts.d.DATAOBJ.DATA.reverse();
        for (let i = 0; i < ts.d.DATAOBJ.DATA.length; i += 1) {
          this.isFold.push(true);
        }
        if (flag) {
          this.list1 = this.list1.concat(ts.d.DATAOBJ.DATA);
          if (ts.d.DATAOBJ.DATA.length == 0) {
            this.busy = true;
            this.loadingText = '没有更多数据';
          } else {
            this.busy = false;
            this.loadingText = '加载中...';
          }
        } else {
          this.list1 = ts.d.DATAOBJ.DATA;
          this.busy = false;
        }
      });
    },
    goOpenPrescribe(item) {
      if (item.issure == 'y') {
        alert('用户已付款，不能修改！');
        return;
      }

      this.$router.push({
        name: 'openPrescribe',
        query: {
          prescribeInfo: JSON.stringify(item),

          ydmc: item.YDMC,
          yddh: item.YDDH,
          ayid: item.AYID,
          yddz: item.YDDZ,

        },
      });
    },
    goOpenPrescribexy(item) {
      if (item.issure == 'y') {
        alert('用户已付款，不能修改！');
        return;
      }

      this.$router.push({
        name: 'openPrescribe1',
        query: {

          prescribeInfo: JSON.stringify(item),
          ydmc: item.YDMC,
          yddh: item.YDDH,
          ayid: item.AYID,
          yddz: item.YDDZ,

        },
      });
    },
  },
};
</script>
<style scoped>
.selectPre {
  width: 100%;
  height: 100%;
  background-color: #5d7d98;
}
.selectPre div {
  line-height: 4rem;
  vertical-align: middle;
  color: #fff;
}
.selectPre div span:first-child {
  margin-left: 1.5rem;
  vertical-align: middle;
}
.selectPre div span:last-child {
  margin-left: 1rem;
}
.mint-popup-bottom {
  width: 100%;
  letter-spacing: 1px;
}
.mint-popup-right {
  /* top: 8%; */
  width: 100%;
  height: 100%;
  right: 0;
  bottom: auto;
  left: auto;
  -webkit-transform: translate3d(5, -50%, 0);
  transform: translate3d(5, -50%, 0);
  text-align: left; /*
  -webkit-box-shadow: 0px 2px 10px #c8c8c8;
  -moz-box-shadow: 0px 2px 10px #c8c8c8;
  box-shadow: -1px 0px 10px #ccc; */
  opacity: 1;
}
.loadingT {
  text-align: center;
  color: #ccc;
  margin-bottom: 0;
  padding-top: 0.5rem;
  font-size: 0.8rem;
}
.c_content {
  background: #fff;
  padding-top: 0.1rem;
}
.c_patient {
  border-bottom: 0px solid #ddd;
  padding: 0.5rem 1rem;
}
.c_patient_p {
  font-family: "Microsoft Yahei";
  color: #666;
  margin: 0.2rem;
}
.c_patient_p_info {
  font-family: "Microsoft Yahei";
  color: rgb(170, 170, 170);
  margin: 0.2rem;
  font-size: 0.9rem;
}
.c_patient_b {
  background: #3190e8;
  float: right;
  color: #fff;
  padding: 0.3rem 1rem;
  border: none;
  outline: none;
  margin-top: 0.5rem;
  border-radius: 1rem;
}
.c_nav {
  display: flex;
  justify-content: space-around;
  background-color: #fff;
  padding: 0.6rem;
  border-bottom: 1px solid #ebebeb;
}
.c_nav div {
  flex: 1;
  text-align: center;
}
.c_nav span {
  font-size: 1rem;
  padding: 0.2rem;
  color: #666;
  font-family: "Microsoft Yahei";
}
.c_nav_active {
  color: #3190e8;
  border-bottom: 2px solid #3190e8;
}
.fade-choose-enter-active,
.fade-choose-leave-active {
  transition: opacity 0.2s;
}
.fade-choose-leave,
.fade-choose-leave-active {
  display: none;
}
.fade-choose-enter,
.fade-choose-leave-active {
  opacity: 0;
}
.bingli {
  padding:0.2rem 0.5rem 1.5rem 0.5rem;
  margin-top: 9rem;
}
.bingli_con {
  border: 1px solid #f1f1f1;
  margin: 0.5rem auto;
  padding: 0.5rem;
  border-radius: 0.5rem;
  background-color: #fff;
  color: #999;
}
.bingli_con p {
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  color: #666
}
.bingli_con p:first-child {
  font-size: 0.9rem;
  color: #26a2ff;
}
.bingli_con p span {
  float: right;
  text-overflow: ellipsis;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  -moz-text-overflow: ellipsis;
  white-space: nowrap;
  /* width: 40%; */
  text-align: right;
  overflow: hidden;
}
.bingli_time {
  float: right;
  font-size: 0.9rem;
  color: #3190e8;
}
.liuyan {
  overflow: auto;
  background-color: #fff;
/*   margin-bottom: 3rem;
  margin-top: 9rem; */
}
.liuyan .patient {
  background-color: #b0edf5;
  float: right;
  margin: 1rem;
  padding: 0.3rem;
  font-size: 0.9rem;
  margin-bottom: 0;
  width: 60%;
  word-break: break-all;
  color: #333;
  border-radius: 2rem;
  padding-left: 1.5rem;
}
.liuyan .doctor {
  background-color: rgba(196, 204, 204, 0.466);
  float: left;
  margin: 1rem;
  padding: 0.3rem;
  font-size: 0.9rem;
  font-family: "Microsoft Yahei";
  margin-bottom: 0;
  width: 60%;
  word-break: break-all;
  color: #333;
  border-radius: 2rem;
  padding-left: 1.5rem;
}
.liuyan_time {
  font-size: 0.7rem;
  display: block;
  color: #aaa;
}
.inputMessage {
  outline: none;
/*   margin-top: 0.5rem;
  padding: 0.5rem 0; */
  width: 76%;
  border: none;
  font-size: 0.9rem;
  font-family: "Microsoft Yahei";
  /* border-top: 1px solid #f1f1f1; */
  text-indent: 0.5rem;
}
.buttonMessage {
  outline: none;
  /* margin-top: 0.5rem; */
  width: 20%;
  padding: 0.25rem 0;
  border: none;
  font-size: 0.9rem;
  background: #3190e8;
  color: #fff;
  border-radius: 2rem;
  letter-spacing: 2px;
}
.huifu {
  position: fixed;
  width: 100%;
  bottom: 0;
  z-index: 99;
  overflow: hidden;
  background: #fff;
  padding: .5rem 0;
}
.isfold {
  max-height: 4rem;
  overflow: hidden;
}
.zyflag {
  border: 1.5px solid rgba(247, 64, 2, 0.65882);
  color: rgba(247, 64, 2, 0.65882);
  width: auto;
  border-radius: 3.5px;
  padding: 0.05rem 0.2rem;
  font-size: 0.5rem;
  letter-spacing: 1px;
  display: inline-table;
}
.xyflag {
  border: 1.5px solid #3190e8;
  color: #3190e8;
  width: auto;
  border-radius: 3.5px;
  padding: 0.05rem 0.2rem;
  font-size: 0.5rem;
  letter-spacing: 1px;
  display: inline-table;
}
</style>

